<template>
    <div class="header">
        <div class="header-left">
            <span class="iconfont ">&#xe624;</span>
        </div>
         <div class="header-input">
             <span class="iconfont">&#xe632;</span>
             输入城市/游玩/主题
             </div>
          <div class="header-right">
                            城市
              <span class="iconfont">&#xe64a;</span>
          </div>
    </div>
</template>

<script>
export default {
  name:'HomeHeader'
}
</script>

<style  scoped>
 .header{
     display:flex;
     line-height:2.5rem /* 40/16 */ /* 86/16 */;
     background-color: #00bcd4;
     color: #fff;
     justify-content: space-around;
 }
 .header-input{
     margin-top: .3rem;
     width: 75%;
     height: 1.9rem; 
     background-color: #fff;
     border-radius: .5rem;
     margin-left: .45rem;
     color: #cccccc;
     line-height: 1.9rem;
     text-align: left;
 }
 .header-right{
     width: 15%;
   text-align: center;
    font-size: .8rem;
 }
 .header-left{
     width: 10%;
     padding: 0;
     text-align: center;
 }
 .iconfont {
     font-size: .8rem;
 }
</style>
